<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-个人评测中心'"> </Breadcrumb>
        <view class="content">
          <view class="box">
            <view class="title">
              <text class="title1"
                >{{ wordTypeText }}/{{ bookEdition }}{{ bookYear }}/{{
                  evaluationTypeText
                }}</text
              >
              <text class="title2"
                >(本次测试共{{ wordNumber }}题,总分100分)</text
              >
            </view>
            <view
              class="section"
              v-if="wordType === '2' && wordList.length > 0"
            >
              <WordTestLook
                ref="wordTestLook"
                :wordList="wordList"
                @clearTimer="clearTimer"
                @commitTest="commitTest"
              >
                <template slot="progress">
                  <view class="progress1">
                    <u-circle-progress
                      active-color="rgb(9, 129, 188)"
                      inactive-color="rgba(9, 129, 188, 0.35)"
                      :percent="percent"
                      bg-color="rgba(0,0,0,0)"
                    >
                      <view class="u-progress-content">
                        <view class="u-progress-text">倒计时</view>
                        <view class="u-progress-text"
                          >{{ minuteNumber }}分{{ secondNumber }}秒</view
                        >
                      </view>
                    </u-circle-progress>
                  </view>
                </template>
              </WordTestLook>
            </view>
            <view
              class="section"
              v-if="wordType === '1' && wordList.length > 0"
            >
              <WordTestListen
                ref="wordTestListen"
                :wordList="wordList"
                @clearTimer="clearTimer"
                @commitTest="commitTest"
              >
                <template slot="progress">
                  <view class="progress2">
                    <u-circle-progress
                      active-color="rgb(9, 129, 188)"
                      inactive-color="rgba(9, 129, 188, 0.35)"
                      :percent="percent"
                      bg-color="rgba(0,0,0,0)"
                    >
                      <view class="u-progress-content">
                        <view class="u-progress-text">倒计时</view>
                        <view class="u-progress-text"
                          >{{ minuteNumber }}分{{ secondNumber }}秒</view
                        >
                      </view>
                    </u-circle-progress>
                  </view>
                </template>
              </WordTestListen>
            </view>
          </view>
          <view class="tips" v-if="wordType === '1'">
            <view class="tips_content">
              <text>打开软键盘</text>
              <u-switch
                v-model="softKeyboard"
                @change="softKeyboardSwitch"
                size="22"
              ></u-switch>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { startEvaluation, commitEvaluation } from "@/api/sync";
import { getSystemDateTime } from "@/api/common";
export default {
  components: {},
  computed: {
    wordNumber() {
      return this.wordList.length;
    },
    wordTypeText() {
      return this.wordType === "2" ? "单词听选" : "单词听写";
    },
    evaluationTypeText() {
      return this.evaluationType === "1" ? "全书测" : this.chapterName;
    },
    percent() {
      if (this.minute >= 0) {
        return parseInt(
          ((this.minute * 60 + this.second) / this.countDownNumber) * 100
        );
      }
    },
  },
  data() {
    return {
      bookId: "",
      wordType: "",
      evaluationType: "",
      bookEdition: "",
      bookYear: "",
      grade: "",
      startTime: "",
      eyeProtectionMode: false,
      softKeyboard: true,
      wordList: [],
      minute: 30,
      minuteNumber: "30",
      second: 0,
      secondNumber: "00",
      countDownNumber: 1800,
      timerId: null,
    };
  },
  onLoad(option) {
    this.bookId = option.bookId;
    this.wordType = option.wordType;
    this.evaluationType = option.evaluationType;
  },
  onReady() {
    this.init();
    this.getTime();
  },
  methods: {
    init() {
      let params = {
        textbookId: this.bookId,
        wordType: this.wordType,
      };
      startEvaluation(params).then((res) => {
        this.bookEdition = res.data.bookEdition;
        this.bookYear = res.data.bookYear;
        this.grade = res.data.grade;
        if (res.data.wordList.length > 0) {
          this.wordList = res.data.wordList;
          this.timer();
        } else {
          uni.showModal({
            title: "提示",
            content: "单词量不足，无法完成评测",
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                uni.navigateBack({
                  delta: 1,
                });
              }
            },
          });
        }
      });
    },
    getTime() {
      getSystemDateTime().then((res) => {
        this.startTime = res.data;
      });
    },
    timer() {
      this.timerId = setInterval(() => {
        this.second--;
        if (this.second < 0) {
          this.second = 59;
          this.minute--;
        }
        if (this.minute < 0) {
          return;
        }
        if (this.second < 10) {
          this.secondNumber = this.second.toString().padStart(2, "0");
        } else {
          this.secondNumber = this.second.toString();
        }
        if (this.minute < 10) {
          this.minuteNumber = this.minute.toString().padStart(2, "0");
        } else {
          this.minuteNumber = this.minute.toString();
        }
        this.countdown++;
      }, 1000);
    },
    clearTimer() {
      clearInterval(this.timerId);
    },
    softKeyboardSwitch(value) {
      this.$refs.wordTestListen.softKeyboard(value);
    },
    commitTest(correctList, errorList, allList, score) {
      let params = {
        yesWordIds: correctList.toString(),
        errId: errorList.toString(),
        wordIds: allList.toString(),
        startTime: this.startTime,
        score: score,
        grade: this.grade,
        type: this.wordType,
        examType: 11,
      };
      commitEvaluation(params).then((res) => {
        let goldNum = res.data.goldNum || 0;
        let reportList = res.data.reportTemplate.split(/[(\r\n)\r\n]+/);
        if (this.wordType === "1") {
          this.$refs.wordTestListen.showResult(goldNum, reportList);
        } else if (this.wordType === "2") {
          this.$refs.wordTestLook.showResult(goldNum, reportList);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./evaluationDetail";
</style>
